<!--  -->
<template>
  <Layout>
    <Header class="my-header">
      <my-header></my-header>
    </Header>
    <Layout class="main">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </Layout>
    <BackTop></BackTop>
  </Layout>
</template>

<script>
import MyHeader from './header'
import { quillEditor } from 'vue-quill-editor'
export default {
  data () {
    return {
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            // 加粗 斜体 下划线 删除线
            ['bold', 'italic', 'underline', 'strike'],
            // 引用 代码块 图片 清除字体样式
            ['blockquote', 'code-block', 'image', 'clean'],
            // 标题
            [{ header: 1 }, { header: 2 }],
            // 上标/下标
            [{ script: 'sub' }, { script: 'super' }],
            // 缩进
            [{ indent: '-1' }, { indent: '+1' }],
            // 字体颜色 背景颜色
            [{ color: [] }, { background: [] }],
            // 对齐方式
            [{ align: [] }]
          ]
        }
      }
    }
  },
  components: {
    MyHeader
  },
  created () {
    console.log('created')
  },
  destroyed () {
    console.log('destroyed')
  },
  methods: {
    onEditorBlur () {
      //失去焦点事件
    },
    onEditorFocus () {
      //获得焦点事件
    },
    onEditorChange () {
      //内容改变事件
    }
  }
}
</script>
<style scoped>
</style>
